<template>
    <div id="order">
        <div class="search_bar clearfix">
            <a href="index.html"><img src="../assets/images/logo.png" class="logo fl"></a>
            <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;我的订单</div>
            <div class="search_con fr">
                <input type="text" class="input_text fl" name="" placeholder="搜索商品">
                <input type="button" class="input_btn fr" name="" value="搜索">
            </div>
        </div>

        <div class="total_count">全部商品<em>{{ goods.length }}</em>件</div>
        <ul class="cart_list_th clearfix">
            <li class="col01">商品名称</li>
            <li class="col02">商品单位</li>
            <li class="col03">商品价格</li>
            <li class="col04">数量</li>
            <li class="col05">小计</li>
            <li class="col06">操作</li>
        </ul>

        <div class="main_con clearfix">
            <div class="left_menu_con clearfix">
                <h3>用户中心</h3>
                <ul>
                    <li><a href="#/personal">· 个人信息</a></li>
                    <li><a href="user_center_order.html" class="active">· 全部订单</a></li>
                    <li><a href="#/personal">· 收货地址</a></li>
                </ul>
            </div>
            <div class="right_content clearfix" style="background-color: rgb(245, 237, 226);border-radius: 10px;border-color: black;">
                <h2 class="common_title2" style="margin: 10px;font-size: 20px;">全部订单</h2>
                <div v-for="item in ordersArr">
                    <ul class="order_list_th w978 clearfix">
                        <li class="col01">{{ item.created }}</li>
                        <li class="col02">订单号：{{ item.orderid }}</li>
                        <li class="col02 stress" v-if="item.state == 1">未支付</li>
                        <li class="col02 stress" v-if="item.state == 2">已支付</li>
                        <!-- <li class="col03"><a @click="toComment(item.orderid)">去评论</a></li> -->
                    </ul>

                    <table class="order_list_table w980">
                        <tbody>
                            <tr>
                                <td width="55%">
                                    <ul class="order_goods_list clearfix" v-for="detail in item.orderdetailets">
                                        <li class="col01"><img :src="serverApiUrl + detail.product.imgurl"></li>
                                        <li class="col02">
                                            {{ detail.product.name }}<em>{{
                                                    detail.product.price
                                            }}元/500g</em>
                                        </li>
                                        <li class="col03">{{ detail.quantity }}</li>
                                        <li class="col04">{{ detail.money }}元</li>
                                    </ul>

                                </td>
                                <td width="15%">{{ item.total }}元</td>
                                <td width="15%" v-if="item.state == 1">待付款</td>
                                <td width="15%" v-if="item.state == 2">已付款</td>
                                <td width="15%"><a href="#" class="oper_btn" v-if="item.state == 1"
                                        @click="toPay(item.orderid)">去付款</a>
                                <tr></tr><a href="#" class="oper_btn" v-if="item.state == 2"
                                        @click="toComment(item.orderid)">去评论</a></td>
                            </tr>
                        </tbody>
                    </table>

                </div>


            </div>
        </div>

    </div>
</template>

<script>
import { getOrderListApi } from '../api/GetOrder'
import { serverApiUrl } from '../api/serverApiUrl'

let goodsData = [{ id: '1001', name: '猕猴桃', unit: '500g', price: 30, number: 1 }];

export default {
    name: 'Order',
    data() {
        return {
            goods: goodsData,
            userId: "",
            ordersArr: [],
            serverApiUrl: serverApiUrl,
        }
    },
    methods: {
        getOrder() {
            this.userId = JSON.parse(window.sessionStorage.getItem("user")).id;
            if (this.userId == null) {
                this.$router.push("/login");
                return;
            };
            getOrderListApi({ "userId": this.userId }).then(resp => {
                this.ordersArr = resp;
            });
        },
        toPay(orderid) {
            this.$router.push({
                path: '/pay',
                query: {
                    orderId: orderid
                }
            })
        },
        toComment(orderid){
            this.$router.push({
                path: '/comment',
                query: {
                    orderId: orderid
                }
            })
        }


    },
    created() {
        this.getOrder();
    }

}
</script>
<style scoped>

</style>
